<template>
    <section>
        <ul id="lis">
            <Item @delToDoListItemById='delToDoListItemById' @changeCheckedToDoItem='changeCheckedToDoItem'/>            
        </ul>          
    </section>
</template>

<script>
import Item from '@/components/item'

export default {
    name:'List',
    components:{
        Item
    },
    setup(props,{emit}) {

      /* 删除当前任务 */
      function delToDoListItemById(delToDoListItemById){
        emit('delToDoListItemById', delToDoListItemById)
      } 

      /* 改变当前任务选中状态 */
      function changeCheckedToDoItem(changeCheckedToDoItem){
         emit('changeCheckedToDoItem', changeCheckedToDoItem)
      }     

      return{        
        delToDoListItemById,
        changeCheckedToDoItem
      }
    }
}
</script>

<style scoped>
section ul{
    margin: 30px 0;
    border: 1px solid #E9E9E9;
    border-radius: 5px;    
}
</style>